<template>
  <div>
    <el-dialog :visible="visible" title="添加计费规则" width="650px" @close="$emit('update:visible',false)">
      <el-row type="flex" justify="center">
        <el-form ref="formRef" style="width: 480px" size="mini" :model="formData" :rules="rules">
          <el-form-item label="计费规则编号" prop="ruleNumber">
            <el-input v-model="formData.ruleNumber" placeholder="请输入计费规则编号" />
          </el-form-item>
          <el-form-item label="计费规则名称" prop="ruleName">
            <el-input v-model="formData.ruleName" placeholder="请输入计费规则名称" />
          </el-form-item>
          <el-form-item
            label="计费方式（全天收费）"
            prop="chargeType"
          ><br>
            <el-row type="flex" justify="space-between">
              <el-radio v-model="formData.chargeType" label="duration" border>时长收费</el-radio>
              <el-radio v-model="formData.chargeType" label="turn" border>按次收费</el-radio>
              <el-radio v-model="formData.chargeType" label="partition" border>分段收费</el-radio>
            </el-row>
          </el-form-item>
          <el-row type="flex" justify="space-between">
            <el-form-item label="免费时长">
              <el-input v-model="formData.freeDuration" placeholder="请输入免费时长" style="width:180px" /> 分钟
            </el-form-item>
            <el-form-item label="收费上限">
              <el-input v-model="formData.chargeCeiling" placeholder="请输入收费上限" style="width:180px" /> 元
            </el-form-item>
          </el-row>
          <el-form-item v-if="formData.chargeType==='duration'" label="计费规则" prop="chargeType"><br>
            <el-form-item prop="durationTime">
              每<el-input
                v-model="formData.durationTime"
                placeholder="请输入"
                style="width: 160px; margin: 0 6px"
              />
              <el-select v-model="formData.durationType" placeholder="请选择" style="width: 120px">
                <el-option label="小时" value="hour" />
                <el-option label="分钟" value="minute" />
              </el-select>
              <el-input
                v-model="formData.durationPrice"
                placeholder="请选择"
                style="width: 156px; margin-left: 4px"
              />元
            </el-form-item>
          </el-form-item>
          <el-form-item v-else-if="formData.chargeType==='turn'" label="计费规则" prop="chargeType"><br>
            <el-form-item prop="turnPrice">
              每<el-input
                v-model="formData.turnPrice"
                placeholder="请输入"
                style="width: 160px; margin: 0 6px"
              />元
            </el-form-item>

          </el-form-item>
          <el-form-item v-else-if="formData.chargeType==='partition'" label="计费规则" prop="chargeType"><br>
            <el-row style="width: 100%;" type="flex" justify="space-between">
              <el-form-item prop="partitionFrameTime">
                <el-input
                  v-model="formData.partitionFrameTime"
                  placeholder="请输入"
                  style="width: 160px; margin: 0 6px"
                />小时内，每小时收费
              </el-form-item>
              <el-form-item prop="partitionFramePrice">
                <el-input v-model="formData.partitionFramePrice" placeholder="请输入" style="width: 155px; margin: 0 3px" />元
              </el-form-item>
            </el-row>

            <el-row style="width: 100%;" type="flex" justify="space-between">
              <el-form-item prop="partitionIncreaseTime">
                每年增加<el-input
                  v-model="formData.partitionIncreaseTime"
                  placeholder="请输入"
                  style="width: 160px; margin: 0 6px"
                />小时，增加
              </el-form-item>
              <el-form-item prop="partitionIncreasePrice">
                <el-input v-model="formData.partitionIncreasePrice" placeholder="请输入" style="width: 155px; margin: 0 3px" />元
              </el-form-item>
            </el-row>

          </el-form-item>

          <el-form-item>
            <el-row type="flex" justify="end">
              <el-button @click="$emit('update:visible',false)">取消</el-button>
              <el-button type="primary" size="medium" @click="onSubmit">确定</el-button>
            </el-row>
          </el-form-item>

        </el-form>
      </el-row>
    </el-dialog>
  </div>
</template>

<script>
import { addFeeRulesAPI } from '@/api/feeRules'
export default {
  props: {
    visible: Boolean
  },
  data() {
    return {
      radio: '1',
      formData: {
        ruleNumber: '', // 计费规则编号
        ruleName: '', // 计费规则名称
        freeDuration: '', // 免费时长，单位：分钟
        chargeCeiling: null, // 收费上限
        chargeType: 'duration', // 收费类型，时长收费:duration,按次收费:turn,分段收费:partition
        durationTime: null, // 时长计费单位时间
        durationPrice: null, // 时长计费单位价格
        durationType: '', // 时长收费类型 minute:分钟，hour:小时枚举值:minute hour
        turnPrice: null, // 按次收费：每次价格
        partitionFrameTime: null, // 分段收费:段内时间
        partitionFramePrice: null, // 分段收费:段内费用
        partitionIncreaseTime: null, // 分段收费:超出时间
        partitionIncreasePrice: null// 分段收费:超出范围收费价钱
      },
      rules: {
        ruleNumber: [
          {
            required: true, message: '请输入计费规则编号！', trigger: 'blur'
          }
        ],
        ruleName: [
          {
            required: true, message: '请输入计费规则名称！', trigger: 'blur'
          }
        ],
        chargeType: [
          {
            required: true, message: '请选择计费方式', trigger: 'blur'
          }
        ],
        durationTime: [
          {
            required: true, message: '请输入计费时间！', trigger: 'blur'
          }
        ],
        durationPrice: [
          {
            required: true, message: '请输入计费金额！', trigger: 'blur'
          }
        ],
        durationType: [
          {
            required: true, message: '请选择计费时间单位！', trigger: 'blur'
          }
        ],
        turnPrice: [
          {
            required: true, message: '请输入计费金额！', trigger: 'blur'
          }
        ],
        partitionFrameTime: [
          {
            required: true, message: '请输入计费时间！', trigger: 'blur'
          }
        ],
        partitionFramePrice: [
          {
            required: true, message: '请输入计费金额！', trigger: 'blur'
          }
        ],
        partitionIncreaseTime: [
          {
            required: true, message: '请输入计费时间！', trigger: 'blur'
          }
        ],
        partitionIncreasePrice: [
          {
            required: true, message: '请输入计费金额！', trigger: 'blur'
          }
        ]
      }
    }
  },
  //   监听 重置表单
  watch: {
    visible(newVisible) {
      if (!newVisible) {
        this.$refs.formRef.resetFields()
      }
    }
  },
  methods: {
    // 点击确认 表单提交校验
    async onSubmit() {
      await this.$refs.formRef.validate()
      //   发送添加接口
      await addFeeRulesAPI(this.formData)
      //   通知父组件 提示用户 关闭弹窗
      this.$emit('onSuccess')
      this.$message.success('添加成功')
      this.$emit('update:visible', false)
    }
  }
}
</script>

<style>

</style>
